import React from 'react';
import {createAppContainer, createBottomTabNavigator} from 'react-navigation';
import Index from '../pages/index';
import Find from '../pages/find/find';
import News from '../pages/news/news';
import My from '../pages/my/my';
import {Dimensions, Image, StyleSheet,} from 'react-native';

const {height, width} = Dimensions.get('window');
const tintColor = '#3396FB'
const BottomTabNavigator = createBottomTabNavigator({
        Index: {
            screen: Index,
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon: ({tintColor, focused}) => (
                    focused ?
                        <Image
                            style={[style.tabBarImg, {tintColor: tintColor}]}
                            source={require('../resources/images/home_1.png')}/> :
                        <Image
                            style={style.tabBarImg}
                            source={require('../resources/images/home_0.png')}/>
                ),
            },
        },
        Find: {
            screen: Find,
            navigationOptions: {
                tabBarLabel: '发现',
                title: '发现',
                tabBarIcon: ({tintColor, focused}) => (
                    focused ?
                        <Image
                            style={[style.tabBarImg, {tintColor: tintColor}]}
                            source={require('../resources/images/find_0.png')}/> :
                        <Image
                            style={style.tabBarImg}
                            source={require('../resources/images/find_1.png')}/>

                ),
            },
        },
        News: {
            screen: News,
            navigationOptions: {
                tabBarLabel: '消息',
                tabBarIcon: ({tintColor, focused}) => (
                    focused ?
                        <Image
                            style={[style.tabBarImg, {tintColor: tintColor}]}
                            source={require('../resources/images/notic_1.png')}/> :
                        <Image
                            style={[style.tabBarImg, {tintColor: tintColor}]}
                            source={require('../resources/images/notic_0.png')}/>
                ),
            },
        },
        My: {
            screen: My,
            navigationOptions: {
                header: null,
                tabBarLabel: '我的',
                tabBarIcon: ({tintColor, focused}) => (
                    focused ?
                        <Image
                            style={[style.tabBarImg, {tintColor: tintColor}]}
                            source={require('../resources/images/zone_1.png')}/> :
                        <Image
                            style={[style.tabBarImg, {tintColor: tintColor}]}
                            source={require('../resources/images/zone_0.png')}/>
                ),
            },
        },
    },
    {
        initialRouteName: 'Index',
        animationEnabled: true,
        swipeEnabled: true,//允许滑动
        lazy: false,
        pressColor: '#788493',
        pressOpacity: 0.8,
        tabBarOptions: {
            activeTintColor: tintColor,
            inactiveTintColor: '#818465',
            style: {
                borderTopColor: '#ebebeb',
                borderTopWidth: 2,
                height: height * 0.084,
                backgroundColor: '#ffffff',
            },
            labelStyle: {
                fontSize: 11.5, margin: 0
            },
        }
    })

const style = StyleSheet.create({
    tabBarImg: {
        height: width * 0.066,
        width: width * 0.066,
    }
})
export default createAppContainer(BottomTabNavigator)
